<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jsx小练习</title>
  </head>
  <body>
    <!-- 准备号一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react dom操作 -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
      /**
       * js语句与js表达式的区别
       * 1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
       *    下面这些都是表达式
       *    1) a
       *    2) a + b
       *    3) demo(1)
       *    4) a.map(item => item)
       *    5) function demo(){}
       * 2. 语句：
       *    下面这些都是语句
       *    1) if(){}
       *    2) for(){}
       *    3) var a = 10
       */


      // 模拟一些数据
      const data = ['Angular', 'React', 'Vue']

      // 1.创建虚拟DOM
      const VDOM = (
        <div>
          <h1>前端js框架列表</h1>
          <ul>
            {data.map((v, index) => (
              <li key={index}>{v}</li>
            ))}
          </ul>
        </div>
      )

      // 2. 渲染虚拟DOM到界面
      ReactDOM.render(VDOM, document.getElementById('test'))
    </script>
  </body>
</html>
